<template>
    <view class="login-page login-page2">
        <form @submit="formSubmit">
            <view class="login-container">
                <view class="login-text">重置密码～</view>
                <view class="login-form">
                    <view class="login-form__lable">手机号码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.mobile" class="login-input" type="text" name="mobile" maxlength="11" placeholder="请输入您的手机号码" />
                        <image @click="formData.mobile = ''" v-if="formData.mobile" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view>
                <view class="login-form login-code">
                    <view class="login-form__lable">验证码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.verification_code" class="login-input" name="verification_code" placeholder="请输入验证码" />
                        <image
                            @click="formData.verification_code = ''"
                            v-if="formData.verification_code"
                            src="/static/img/login/clear.png"
                            class="clear-icon next-icon"
                            :class="{ isSend: disabled }"
                        ></image>
                        <button class="btn-text" @click="startTime" :disabled="disabled">{{ disabled ? `重新发送（${time}）` : "获取验证码" }}</button>
                    </view>
                </view>
                <view class="login-form">
                    <view class="login-form__lable">新密码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.password" class="login-input" type="password" name="password" placeholder="请输入您的密码" />
                        <image @click="formData.password = ''" v-if="formData.password" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view>
                <view class="login-form">
                    <view class="login-form__lable">新密码</view>
                    <view class="login-form__input">
                        <input v-model.trim="formData.password_confirmation" class="login-input" type="password" name="password_confirmation" placeholder="请再次输入您的新密码" />
                        <image @click="formData.password_confirmation = ''" v-if="formData.password_confirmation" src="/static/img/login/clear.png" class="clear-icon next-icon"></image>
                    </view>
                </view>
                <view class="login-footer">
                    <button class="btn-blue flex" form-type="submit" :loading="loading">{{ loading ? "提交中" : "完成" }}</button>
                </view>
                <view class="login-register flex-end">
                    <navigator class="text-blue-1 inline" url="/pages/login/index" open-type="navigate" hover-class="none"> 返回登录 </navigator>
                </view>
            </view>
        </form>
    </view>
</template>

<script>
import WxValidate from "@/utils/WxValidate"
export default {
    data() {
        return {
            loading: false,
            formData: {
                mobile: "",
                verification_code: "",
                password: "", //密码
                password_confirmation: "" //确认密码
            },
            timer: "",
            time: 0,
            disabled: false,
            codeLoading: false,
            validate: {}
        }
    },
    onLoad() {
        if (uni.getStorageSync("token")) {
            uni.reLaunch({ url: "/pages/index" })
        }
        const msg = {
            mobile: { required: "请输入11位手机号码", tel: "请输入正确的手机号码" },
            verification_code: { required: "请输入验证码" },
            password: { required: "请输入您的密码", minlength: "密码长度最小为6位" },
            password_confirmation: { required: "请再次输入您的密码", minlength: "密码长度最小为6位" }
        }
        const rule = {
            mobile: { required: true, tel: true },
            verification_code: { required: true },
            password: { required: true, minlength: 6 },
            password_confirmation: { required: true, minlength: 6 }
        }
        const rules = {
            mobile: rule.mobile,
            verification_code: rule.verification_code,
            password: rule.password,
            password_confirmation: rule.password_confirmation
        }
        const message = {
            mobile: msg.mobile,
            verification_code: msg.verification_code,
            password: msg.password,
            password_confirmation: msg.password_confirmation
        }
        this.validate = new WxValidate(rules, message)
    },
    methods: {
        async startTime() {
            try {
                if (this.codeLoading) return
                this.codeLoading = true
                await this.$api.getLoginCode({ mobile: this.formData.mobile })
                this.codeLoading = false
                this.$showSuccess("已发送")
                this.time = 30
                this.disabled = true
                clearInterval(this.timer)
                this.timer = setInterval(() => {
                    this.time--
                    if (this.time === 0) {
                        this.disabled = false
                        this.time = 0
                        clearInterval(this.timer)
                    }
                }, 1000)
            } catch (error) {
                this.codeLoading = false
            }
        },
        async formSubmit(e) {
            const params = e.mp.detail.value
            // 传入表单数据，调用验证方法
            if (!this.validate.checkForm(params)) {
                const error = this.validate.errorList[0]
                this.$showToast(error.msg)
                return false
            }
            if (this.formData.password !== this.formData.password_confirmation) {
                return this.$showToast("两次密码不一样")
            }
            if (this.loading) return
            this.loading = true
            this.$api
                .findPwd(this.formData)
                .then(async () => {
                    this.$showSuccess("找回成功")
                    await this.$setTime(1500)
                    this.loading = false
                    uni.redirectTo({ url: "/pages/login/index" })
                })
                .catch(err => {
                    this.loading = false
                })
        }
    },
    onHide() {
        clearInterval(this.timer)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}
</script>
<style lang="scss" scoped>
.btn-text {
    position: absolute;
    right: 0;
    top: 20rpx;
}
</style>
